<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器</title>
    <style>
        /* a后面的第一个i元素 */
        /* a+i{
            color: red;
        }
        i+span{
            color: green;
        } */
        /* a后面的所有i元素 */
        a~i{
            color: greenyellow;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(187, 208, 240);
            text-align: center;
            line-height: 100px;
        }
        .box1:hover + p{
            /* 向右移动100px */
            transform: translateX(100px);
        }
        p{
            /* 平滑过渡时间 */
            transition:  0.5s;
        }
        /* 属性选择器 */
        /* 如果属性值里面有空格或者中文一定要使用引号 */
        /* [title=iam-box]{
            color: red;
        } */
        div[data-msg="ha ha"]{
            color:blue;
        }
    </style>
</head>
<body>
    <div>
        <a href="" >a标签</a>
        <i>i标签1</i>
        <i>i标签2</i>
        <span>span标签1</span>
        <span>span标签2</span>
        <p>p标签1</p>
        <p>p标签2</p>
    </div>
    <div class="box1">
        +
    </div>
    <p>走你</p>
    <p>打死我也不走</p>
    <hr>
    <div class="box2" id="b2" title="iam-box" data-msg="ha ha">
        我是一个盒子
    </div>
</body>
</html>